<template>
    <div id="studentChart" style="height:100%;"></div>
</template>
<script setup>
import { onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
const props = defineProps(["data"])
console.log(props.data);
const data = props.data
const handleObject = ({ currentItem, tableData, tagData }) => {
    const lengendData = [currentItem.class.title + "的平均值", currentItem.studentname]
    const indicatorData = tagData.map(item => ({ name: item.title, max: 5 }))
    const currentClass = tableData.filter(item => item.class._id === currentItem.class._id)

    // console.log(currentClass)
    const average = []

    tagData.forEach(({ title }, index) => {
        var filterArr = currentClass.filter(item => item.score[title])

        average[index] = (filterArr.map(item => item.score[title]).reduce((total, item) => total + item, 0) / (filterArr.length || 1)).toFixed(2)
    })

    // console.log(average)

    const averageObj = {
        name: lengendData[0],
        value: average
    }

    const currentObj = {
        name: lengendData[1],
        value: tagData.map(({ title }) => currentItem.score[title] ? currentItem.score[title] : 0)
    }

    const seriesData = [averageObj, currentObj]

    return {
        lengendData,
        indicatorData,
        seriesData
    }
}
let {lengendData,indicatorData,seriesData} = handleObject(data)
onMounted(() => {
    nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('studentChart'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'item',
                //鼠标跟随
                position: function (point, params, dom, rect, size) {
                    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                    // 提示框位置
                    var x = 0; // x坐标位置
                    var y = 0; // y坐标位置

                    // 当前鼠标位置
                    var pointX = point[0];
                    var pointY = point[1];

                    // 外层div大小
                    // var viewWidth = size.viewSize[0];
                    // var viewHeight = size.viewSize[1];

                    // 提示框大小
                    var boxWidth = size.contentSize[0];
                    var boxHeight = size.contentSize[1];

                    // boxWidth > pointX 说明鼠标左边放不下提示框
                    if (boxWidth > pointX) {
                        x = 5;
                    } else { // 左边放的下
                        x = pointX - boxWidth;
                    }

                    // boxHeight > pointY 说明鼠标上边放不下提示框
                    if (boxHeight > pointY) {
                        y = 5;
                    } else { // 上边放得下
                        y = pointY - boxHeight;
                    }

                    return [x, y];
                }

            },
            legend: {
                data: lengendData
            },
            radar: {
                // shape: 'circle',
                indicator: indicatorData
            },
            series: [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data:seriesData
                }
            ]
        });
    })
})
</script>
<style scoped lang='scss'></style>